<template>
    <!-- 包裹整个页面的div -->
    <div class="" id="register" >
        <!-- 注册帐号 -->
        <div class="">
            <ul class="register_title clearfix">
                <router-link to="/Login" >
                <li><img src="http://pub.szzhangchu.com/web/v4.2/images/ico/ico-back-white.png" alt=""></li></router-link>
                <li id="register_title_lg">注册</li>
            </ul>
        </div>
        <form id="register_loginUser">
            <div class="register_field">
                <input class="register_input_accs" id="moblie_number" type="text" placeholder="请输入手机号码" ref="phone" />
                <input id="yanzheng_code" type="text" placeholder="请输入验证码" ref="yzcode" />
                <input class="register_input_psd" id="login_password" type="password" placeholder="请输入您的密码" ref="psd"/>
                <div class="forgot-password">
                    <span id="register-forgot-password-btn" >{{rcode}}</span>
                    <!-- <p id="changeCode"@click="createCode">看不清楚</p> -->
                    <p id="changeCode"@click="createCode">看不清楚</p>
                </div>
            </div>
            <div class="login_sBox">
                <input type="submit" class="user-login" value="确定" @click="validate">
                </input>
            </div>
        </form>
    </div>

</template>

<script>
    export default{
        data(){
            return {
                rcode : "请刷新",
                randomArr : [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
                 'S','T','U','V','W','X','Y','Z']
            }
        },
        mounted(){
			let code = "";
                let codeLength = 4;
                let checkCode = this.$refs.phone.value;
                for(let i = 0; i < codeLength; i++) {
                    let index = Math.floor(Math.random()*36);
                    code += this.randomArr[index];
                }
                this.rcode = code;//把code值赋给验证码

		},
        methods: {
        	startCode(){
                let code = "";
                let codeLength = 4;
                let checkCode = this.$refs.phone.value;
                for(let i = 0; i < codeLength; i++) {
                    let index = Math.floor(Math.random()*36);
                    code += this.randomArr[index];
                }
                this.rcode = code;//把code值赋给验证码
            },
            // 创建验证码
            createCode(){
                let code = "";
                let codeLength = 4;
                let checkCode = this.$refs.phone.value;
                for(let i = 0; i < codeLength; i++) {
                    let index = Math.floor(Math.random()*36);
                    code += this.randomArr[index];
                }
                this.rcode = code;//把code值赋给验证码
            },
            //校验验证码
            validate(){
                let inputCode = this.$refs.yzcode.value.toUpperCase(); //取得输入的验证码并转化为大写
                let inputAccs = this.$refs.phone.value;
                let inputPsd  = this.$refs.psd.value;
                if(inputCode.length <= 0) { //若输入的验证码长度为0
                    alert("请输入验证码"); //则弹出请输入验证码
                }else if(inputCode != this.rcode ) { //若输入的验证码与产生的验证码不一致时
                    alert("验证码输入错误"); //则弹出验证码输入错误
                    this.createCode();//刷新验证码
                    this.$refs.yzcode.value = "";//清空文本框
                }else if(this.isRepeat(this.$refs.phone.value)){
                    alert("已注册的帐号，请登录")
                }else if(!(/^1[34578]\d{9}$/.test(inputAccs))){
                    alert("请输入11位手机号")
                }else if(inputPsd.length <= 0){
                	alert("密码不能为空")
                }
                else { //输入正确时
                    alert("注册成功！^-^");
                    localStorage.setItem(this.$refs.phone.value,this.$refs.psd.value);
                    this.$router.push({
                        path: '/Login'
                    })
                }
            },
            isRepeat(sto){
                let rp = false;
                for(let i=0;i<localStorage.length;i++){
                    //key(i)获得相应的键，再用getItem()方法获得对应的值
                    if ( sto == localStorage.key(i)) {
                        rp = true;
                    }
                }
                return rp;
            },
        }
    }
</script>

<style>
    .clearfix:after{
        content: '';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
    input{
        border: 0;
        background: #e8c9b5;
    }
    #register{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        padding-top: .3rem;
        background: #e8c9b5;
    }
    .register_title{
        height: 1rem;
        line-height: 1rem;
        padding: 0 .3rem;
        /*background: red;*/
    }
    .register_title li{
        float: left;
        margin-right: 1.8rem;
    }
    .register_title li:last-of-type{
        margin-right: 0;
    }
    .register_title img{
        margin-top: .25rem;
        width: .55rem;

    }
    #register_title_lg{
        font-size: .42rem;
        color: #fffff3;
        margin-left: 2.1rem ;
    }
    .register_title_register{
        font-size:0.3rem;
        color:#ff8f5c;
    }
    .register_field_img{
        position: absolute;
        left: .5rem;
    }
    /*.register_field_img img{
        width: .5rem;
        margin-top: .2rem;
    }*/
    #register_field{
        position: relative;
        margin-top: 1rem;
    }
    .register_input_accs{
        border-bottom: #f9f9f9 solid 1px;
        background: url(http://pub.szzhangchu.com/web/v4.2/images/ico/loginHeadImage.png) no-repeat left center ;
        background-size: .45rem;
        text-indent: .6rem;
        width: 5rem;
        height: 1rem;
        line-height: .5rem;
        margin: 0 0 .3rem .6rem;
        font-size: .45rem;
        color: #fffff3;
        outline: none;
        padding: .3rem 0 0 0;
    }
    .register_field input::-webkit-input-placeholder {
        color: #fffff3;
        font-size: .3rem;

    }
    .register_input_psd{
        border-bottom: #fffff3 solid 1px;
        /*text-indent: .6rem;*/
        padding: .3rem 0 0 0;
        width: 5rem;
        height: 1rem;
        line-height: .5rem;
        margin: 0 0 .3rem .6rem;
        font-size: .45rem;
        color: #fffff3;
        outline: none;
    }
    .forgot-password{
        position: relative;
    }
    #register-forgot-password-btn{
        position: absolute;
        right: 2.1rem;
        top: -2.4rem;
        font-size:.3rem;
        padding: 0 .2rem;
        color:#ff8f5c;
        background: lightcyan;
        text-align: center;
        width: 1.5rem;
        height: .65rem;
        line-height: .65rem;
    }
    .user-login{
        margin-top: 1rem;
        width: 88%;
        height: .8rem;
        line-height: .8rem;
        background: #ff8f5c;
        border-radius: .1rem;
        text-align: center;
        font-size: .4rem;
        color:#fffff3;
    }
    .login_sBox{
        text-align: center;
    }
    #changeCode{
        color:#fffff3;
        font-weight: 800;
        font-size: .2rem;
        position: absolute;
        right: .7rem;
        bottom: 1.9rem;
    }
    #yanzheng_code{
        border-bottom:  #f9f9f9 solid 1px;
        width: 2rem;
        margin: .5rem .6rem;
        outline: none;
        color: #fffff3;
        font-size: .35rem;
    }
</style>
